<template>
    <div id="map-container"></div>
</template>

<script setup>
import { onMounted } from 'vue';

const initMap = () => {
    const map = new TMap.Map(document.getElementById('map-container'), {
        center: new TMap.LatLng(29.2059,121.8588), // 设置地图中心点坐标
        zoom: 17, // 设置地图缩放级别
        pitch: 0, // 设置俯仰角
        rotation: 0 // 设置地图旋转角度
    });
};

onMounted(() => {
    const script = document.createElement('script');
    script.src = `https://map.qq.com/api/gljs?v=1.exp&key=AYEBZ-BP7LQ-4J55Z-4ENT7-XJIS3-2IBX4`;
    script.onload = initMap;
    document.head.appendChild(script);
});
</script>
<style lang="scss" scoped>
#map-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 50px; /* 添加底部留白 */
}
</style>
